<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg4.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' :leftIconColor="navColor" :bgColor="navBgcolor" @leftClick="navBack"
				:title="info.questionName">
				<view slot="center" class="navTitle" :style="'color:'+navColor">
					在线查看报告
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30" @scroll="setNavColor">
				<view class="reportHead">
					<view class="bg">
						<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/pdfimg.png" mode="aspectFit"></image>
					</view>
					<view class="txt" v-if="info.evaluationTask">
						<view class="tit">
							{{info.evaluationTask.name}}
						</view>
						<!-- <view class="btns">
							<view class="btn" @tap="downloadPdf">
								下载报告
							</view>
						</view> -->
					</view>
				</view>
				<view class="pd30">
					<view class="whiteBox">
						<view class="bg">
							<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxbg3-3.png" mode="widthFix"></image>
						</view>
						<view class="bd box1">
							<view class="name">
								{{info.nickname}}
							</view>
							<view class="p1">
								{{info.sex+' '+info.deptName}}
							</view>
							<view class="date">
								<view class="dt">
									测评时间
								</view>
								<view class="dp">
									{{info.createTimeFormat}}
								</view>
							</view>
							<view class="testLs">
								<view class="ltit">
									测评内容
								</view>
								<view class="ul">
									<view class="li" v-for="(i,index) in info.questionList" :key="index">
										<view class="or">
											{{(index+1)>9?(index+1):('0'+(index+1))}}
										</view>
										<view class="lt">
											{{i.name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="whiteBox">
						<view class="boxtit">
							<view class="ico">
								<image src="@/static/images/icon-tl2.png" mode="heightFix"></image>
							</view>
							<view class="tit">
								报告导读
							</view>
							<view class="ico">
								<image src="@/static/images/icon-tr2.png" mode="heightFix"></image>
							</view>
						</view>
						<view class="bd">
							<view class="reportDes" v-html="daodu"></view>
							<view class="table">
								<view class="bt">
									测评预警信息汇总
								</view>
								<view class="tbody">
									<view class="tr th">
										<view class="td td-3">
											测评量表
										</view>
										<view class="td td-3">
											预警等级
										</view>
										<view class="td td-3">
											分数
										</view>
									</view>
									<view v-for="(tr,idx) in resultParam" :key="idx" v-if="tr.isWarning">
										<view class="tr">
											<view class="td td-3">
												{{tr.question.name}}
											</view>
											<view class="td td-3">
												{{tr.warnResult.scoreDetail.name}}
											</view>
											<view class="td td-3">
												{{tr.warnResult.scoreDetail.score}}分
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="resultParam.length>0" class="suggest" v-for="(i,index) in resultParam" :key="index">
								<view class="itt">
									{{i.indexNo}}、{{i.question.name}}
								</view>
								<view v-if="i.question.description" class="idesc" v-html="i.question.description"></view>
								<view class="table" v-if="i.dimensionList">
									<view class="bt">
										综合评估
									</view>
									<view class="tbody">
										<view class="tr th">
											<view class="td td1">
												维度
											</view>
											<view class="td td1">
												分数
											</view>
											<view class="td td1">
												状态
											</view>
											<view class="td td1">
												参考值
											</view>
											<view class="td td1">
												结果等级
											</view>
										</view>
										<!-- <view class="tr">
											<view class="td td1">
												总分
											</view>
											<view class="td td1">
												{{i.score}}分
											</view>
											<view class="td td1">
												<view class="tdi">
													<view class="tdico">
														<view class="ico" v-if="i.score<i.referenceScore">
															<image src="@/static/images/icon-uper.png"
																mode="heightFix"></image>
														</view>
														<view class="ico" v-if="i.score>i.referenceScore">
															<image src="@/static/images/icon-lower.png"
																mode="heightFix"></image>
														</view>
													</view>
												</view>
											</view>
											<view class="td td1">
												<{{i.referenceScore}}
											</view>
											<view class="td td1">
												{{i.diagnosis}}
											</view>
										</view> -->
										<view  v-for="(td,index) in i.dimensionList" :key="index">
											<view class="tr">
												<view class="td td1">
													{{td.name}}
												</view>
												<view class="td td1">
													{{td.score}}分
												</view>
												<view class="td td1">
													<view class="tdi">
														<view class="tdico">
															<view class="ico" v-if="td.scoreDetail.warningStatus=='up'">
																<image src="@/static/images/icon-uper.png"
																	mode="heightFix"></image>
															</view>
															<view class="ico" v-else="td.scoreDetail.warningStatus=='down'">
																<image src="@/static/images/icon-lower.png"
																	mode="heightFix"></image>
															</view>
															<view class="ico" v-else>
																{{td.scoreDetail.warningStatus}}
															</view>
														</view>
													</view>
												</view>
												<view class="td td1">
													{{td.constantScore}}
												</view>
												<view class="td td1">
													{{td.scoreDetail.name}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="tit">
									评估建议
								</view>
								<view class="items">
									<view class="item">
										<!-- <view class="map" :class="i.score?'':'nomap'">
											<view class="cvscontainer" v-if="i.score">
												<view class="cvs">
													<view class="line1 line">
														<view class="dot1"></view>
														<view class="dot2"></view>
														<view class="i1">
															<view class="cr" :style="'transform:rotate('+(-(136-156*i.referenceScore/100))+'deg)'"></view>
														</view>
													</view>
													<view class="line2 line">
														<view class="dot1"></view>
														<view class="dot2"></view>
														<view class="i1">
															<view class="cr" :style="'transform:rotate('+(-(136-136*i.score/100))+'deg)'"></view>
														</view>
													</view>
												</view>
											</view>
											<view class="hd">
												<view class="score">
													<text class="num">{{i.score}}</text><text>分</text>
												</view>
												<view class="name">
													{{i.name}}
												</view>
												<view class="tag">
													{{i.diagnosis}}
												</view>
											</view>
										</view> -->
										
										<view class="fx">
											<view class="li" v-for="(j,jindex) in i.dimensionList" :key="jindex">
												<text class="nu">{{jindex+1}}</text>
												<text class="b">你的{{j.name}}得分为：{{j.score}}</text>
												<text v-if="j.scoreDetail.name">,维度等级为{{j.scoreDetail.name}}</text>
												<view style="white-space: pre-wrap;" v-if="j.scoreDetail.description">{{j.scoreDetail.description}}</view>
												<view style="white-space: pre-wrap;" v-if="j.scoreDetail.suggest">{{j.scoreDetail.suggest}}</view>
											</view>
										</view>
										<view v-if="i.content" class="idesc" v-html="i.content"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="whiteBox">
						<view class="boxtit">
							<view class="ico">
								<image src="@/static/images/icon-tl2.png" mode="heightFix"></image>
							</view>
							<view class="tit">
								温馨提示
							</view>
							<view class="ico">
								<image src="@/static/images/icon-tr2.png" mode="heightFix"></image>
							</view>
						</view>
						<view class="bd">
							<view class="reportDes" v-html="tips">
								
							</view>
						</view>
					</view>
					<!-- <view class="fbtns">
						<view class="btn" @tap="downloadPdf">
							下载报告
						</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultParam:[],
				itemid: '',
				daodu:'',
				tips:'',
				navBgcolor: 'transparent',
				navColor: '#65554d',
				info: {}
			}
		},
		methods: {
			setNavColor(e) {
				var that = this;
				var top = e.detail.scrollTop;
				if (top > 100) {
					that.navBgcolor = "#ffffff";
					that.navColor = "#4d5765";
				} else {
					that.navBgcolor = "transparent";
					that.navColor = "#4d5765";
				}
			},
			downloadPdf() { //下载报告
				const that=this;
				const url=that.info.reportUrl;
				uni.downloadFile({
					url:url
				});
			},
			getInfo() {
				var that = this;
				if (!that.itemid) {
					return
				};
				
				
				that.$api.reportInfo({
					id: that.itemid
				}, res => {
					if (res.code == 200) {
						that.info = res.data
						that.resultParam=JSON.parse(that.info.resultParam)
						that.resultParam.some(item=>{
							
							item.dimensionList=JSON.parse(item.dimensionList)
						})
						console.log(that.resultParam,1212122)
					}
				})
			}
		},
		onLoad(e) {
			this.itemid=e.id
			this.getInfo();
			
			
				this.$api.articleInfo({
					id:'1874379936011067394'
				}, res => {
					if (res.code == 200) {
						this.daodu = res.data.content
					}
				})
				
					this.$api.articleInfo({
						id:'1874379734592200705'
					}, res => {
						if (res.code == 200) {
							this.tips = res.data.content
						}
					})
		}
	}
</script>

<style lang="scss" scoped>
	.suggest{
		.items{
			.item{
				background: linear-gradient(180deg,#fff7ee,#fff);
				padding: 50rpx 40rpx 30rpx;
			}
		}
		.itt{
			font-size: 32rpx;
			color: #4d5765;
			margin-bottom: 20rpx;
		}
		.idesc{
			font-size: 24rpx;
			color: #7e8998;
			line-height: 1.5;
			margin-bottom: 70rpx;
		}
		.table{
			margin-bottom: 80rpx;
		}
	}
	.reportHead {
		position: relative;
		height: 550rpx;

		.bg {
			image {
				display: block;
				width: 604rpx;
				height: 358rpx;
				margin-left: auto;
			}
		}

		.txt {
			position: absolute;
			left: 0;
			top: 30%;
			transform: translate(0, -50%);
			width: 100%;
			z-index: 5;
			box-sizing: border-box;
			padding: 0 30rpx;

			.tit {
				font-size: 50rpx;
				line-height: 1.2;
				font-weight: bold;
				color: #65554d;
				max-width: 7em;
			}

			.btns {
				margin-top: 50rpx;
			}

			.btn {
				font-size: 24rpx;
				width: 6em;
				line-height: 60rpx;
				border-radius: 60rpx;
				background: #fe9c29;
				color: #fff;
				text-align: center;
			}
		}
	}

	.whiteBox {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 40rpx;
		position: relative;
		z-index: 5;

		&:last-child {
			margin-bottom: 0;
		}

		.bg {
			position: absolute;
			left: 60%;
			width: 40%;
			top: 10%;
			height: 80%;
			z-index: -1;

			image {
				display: block;
				width: 100%;
				height: auto;
			}
		}

		.boxtit {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;

			.ico {
				flex: 0 0 auto;
				padding: 0 20rpx;

				image {
					display: block;
					width: auto;
					height: 16rpx;
				}
			}

			.tit {
				font-size: 36rpx;
				color: #4d5765;
				line-height: 1.2;
				flex: 0 1 auto;
			}
		}
	}

	.box1 {
		font-size: 28rpx;
		color: #7c838d;

		.name {
			font-size: 40rpx;
			color: #4d5765;
			margin-bottom: 20rpx;
		}

		.p1 {
			margin-bottom: 30rpx;
		}

		.date {
			margin-bottom: 90rpx;

			.dt {
				margin-bottom: 10rpx;
			}

			.dp {
				color: #4d5765;
			}
		}

		.testLs {
			.ltit {
				font-size: 32rpx;
				color: #4d5765;
			}

			.ul {
				.li {
					display: flex;
					align-items: center;
					position: relative;
					z-index: 5;
					padding: 20rpx 0;

					&:before {
						content: "";
						position: absolute;
						left: 22rpx;
						bottom: 50%;
						top: 0;
						width: 4rpx;
						background: #e5e9ef;
						z-index: -1;
					}

					&:after {
						content: "";
						position: absolute;
						left: 22rpx;
						top: 50%;
						bottom: 0;
						width: 4rpx;
						background: #e5e9ef;
						z-index: -1;
					}

					.or {
						display: flex;
						width: 48rpx;
						height: 48rpx;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						flex: 0 0 auto;
						background: #fff;
						border: 4rpx solid #ffdeb5;
						border-radius: 50%;
						margin-right: 20rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: #ffdeb5;
						position: relative;
						z-index: 5;

						&:after {
							content: "";
							position: absolute;
							left: -10rpx;
							right: -10rpx;
							top: -10rpx;
							bottom: -10rpx;
							box-sizing: border-box;
							border: 10rpx solid #ffdeb5;
							border-radius: 50%;
							display: none;
						}
					}

					.lt {
						flex: 1 1 auto;
						overflow: hidden;
						color: #4d5765;
					}

					&:first-child:before,
					&:last-child:after {
						display: none;
					}
				}
			}
		}
	}

	.reportDes {
		font-size: 24rpx;
		color: #7e8998;
		line-height: 36rpx;
		margin-bottom: 45rpx;
	}
	.table{
		.tbody{
			.td{
				&.td1{
					width: 20%;
					padding: 20rpx 10rpx;
				}
				&.td-3{
					width: 33.33%;
					padding: 20rpx 10rpx;
				}
			}
		}
	}
</style>